<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="disabled">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="8">
              <a-form-model-item
                label="账户编码"
                :labelCol="labelCol2"
                :wrapperCol="wrapperCol2"
                prop="code"
              >{{model.code}}</a-form-model-item>
            </a-col>
            <a-col :span="16">
              <a-form-model-item
                label="账户名称"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="name"
              >{{model.name}}</a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item
                label="账户余额"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                style="color:red;"
              >{{model.balance}}</a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item
                label="选择额度"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="state"
              >
                <template v-for="tag in values">
                  <a-checkable-tag
                    :key="tag"
                    :checked="selectedTags.indexOf(tag) > -1"
                    @change="checked => handleChange(tag, checked)"
                  >{{ tag }}</a-checkable-tag>
                </template>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item
                label="充值金额"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="busiBalance"
              >
                <a-input-number
                  :min="1"
                  :precision="0"
                  v-model="model.busiBalance"
                  placeholder="请输入充值金额"
                  style="width: 100%"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item
                label="备注"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="comment"
              >
                <a-input v-model="model.comment" placeholder="请输入备注"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
    <a-modal
      class="modal_title"
      title="微信支付"
      :visible="qrVisible"
      @cancel="handleStoreCancel"
      cancel-text="关闭"
    >
      <storecode-modal v-if="qrVisible" :info="info" :param="'id'" :paramValue="'id'"></storecode-modal>
      <template slot="footer">
        <a-button type="default" @click="handleStoreCancel">取消本次支付</a-button>
        <a-button type="primary" @click="handleStockOk">支付完成</a-button>
      </template>
    </a-modal>
  </j-modal>
</template>

<script>
import StorecodeModal from './StorecodeModal.vue'
import { httpAction,postAction } from '@/api/manage'

export default {
  name: 'RechargeModal',
  components: {
    StorecodeModal
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      title: '充值',
      width: 800,
      visible: false,
      disableSubmit: false,
      qrVisible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      confirmLoading: false,
      validatorRules: {
        busiBalance: [{ required: true, message: '请输入充值金额!' }]
      },
      values: ['自定义', 100, 200, 500, 1000],
      selectedTags: ['自定义'],
      orderPay:{},
      states: null,
      info:{}
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    show(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    handleChange(tag, checked) {
      this.selectedTags = []
      this.selectedTags.push(tag)
      if (!isNaN(tag)) {
        this.$set(this.model,"busiBalance",tag);
      } else {
        this.$set(this.model,"busiBalance",null);
      }
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          httpAction(
            '/gift/trans/trans',
            {
              transType: 8,
              price: that.model.busiBalance,
              comment: that.model.comment ? that.model.comment : ''
            },
            'post'
          )
            .then(res => {
              if (res.success) {
                that.orderPay = res.result.orderPay
                console.log(that.orderPay)
                that.qrVisible = true
                that.info = that.orderPay
                that.getOrderstate(that.orderPay)
                clearInterval(that.states)
                that.states = setInterval(() => {
                  console.log(that.orderPay)
                  if (that.orderPay.status == '1') {
                    that.getOrderstate(that.orderPay)
                  } else {
                    that.handleStockOk()
                  }
                }, 2000)
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    //判断是否支付成功
    getOrderstate(orderPay) {
      let param = {
        orderId: orderPay.orderId
      }
      postAction('/gift/trans/queryOrder', param).then(res => {
        if (res.success) {
          this.orderPay = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleStoreCancel() {
      let that=this
      clearInterval(that.states)
      postAction('/gift/trans/cancelOrder',{orderId:that.orderPay.orderId}).then(res=>{
        if(res.success){
          
        }else{
          that.$message.warning(res.message)
        }
      })
      that.qrVisible = false
    },
    handleStockOk() {
      clearInterval(this.states)
      if (this.orderPay.status != '2') {
        this.handleStoreCancel()
        this.$message.warning("支付失败，订单已取消") 
      } else {
        this.$message.success('充值成功，本次充值：'+this.orderPay.price)
        this.qrVisible = false
        this.$emit("ok");
        this.close()
      }
    }
  }
}
</script>
<style scoped>
.ant-tag.ant-tag-checkable {
  border-color: #d9d9d9;
}
.ant-tag.ant-tag-checkable.ant-tag-checkable-checked {
  border-color: transparent;
}
</style>